<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>中小企业风险评估系统</title>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css">
    <script type="text/javascript" src="https://webapi.amap.com/maps?v=2.0&key=fc4b5634f6f6f13c9a660161abe7b3e3"></script>
    <script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/echarts@5.4.3/dist/echarts.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/xlsx/0.18.5/xlsx.full.min.js"></script> <!-- SheetJS 库 -->
    <link rel="stylesheet" href="{{ url_for('static', filename='css/style.css') }}">
    <style>
        /* 初始隐藏仪表盘，显示认证区域 */
        .dashboard-container {
            display: none; /* 初始隐藏 */
        }
        .auth-container {
            display: flex; /* 初始显示 */
            flex-direction: column;
            justify-content: center;
            align-items: center;
            min-height: 100vh; /* 确保填满视口 */
            width: 100%;
            position: relative; /* 相对于 body::before 的伪元素 */
            z-index: 10; /* 确保在背景图之上 */
        }
        .auth-form {
            background-color: var(--card-bg);
            padding: 30px 40px;
            border-radius: 15px;
            box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3);
            width: 100%;
            max-width: 450px;
            border: 1px solid rgba(var(--secondary-color-rgb, 0, 204, 255), 0.3);
        }
        .auth-form h2 {
            color: var(--accent-color);
            margin-bottom: 25px;
            text-align: center;
            font-size: 24px;
        }
        .auth-form .form-group {
            margin-bottom: 20px;
        }
        .auth-form label {
            display: block;
            color: var(--accent-color);
            margin-bottom: 8px;
            font-size: 14px;
        }
        .auth-form input {
            width: 100%;
            padding: 12px 15px;
            background-color: rgba(0, 0, 0, 0.3);
            border: 1px solid var(--primary-color);
            border-radius: 8px;
            color: var(--text-color);
            font-size: 15px;
        }
        .auth-form .btn {
            margin-top: 15px;
            padding: 12px;
        }
        .auth-switch-link {
            display: block;
            text-align: center;
            margin-top: 20px;
            color: var(--secondary-color);
            text-decoration: none;
            font-size: 14px;
        }
        .auth-switch-link:hover {
            text-decoration: underline;
        }
        .error-message-auth {
            color: var(--danger-color);
            font-size: 13px;
            text-align: center;
            margin-top: -10px;
            margin-bottom: 15px;
            min-height: 18px;
        }
        #map {
            width: 100%;
            height: 450px;
        }

        /* 可点击的P标签样式 */
        .panel-left .card-content p[id$="Trigger"] {
            cursor: pointer;
            transition: color 0.3s ease;
        }
        .panel-left .card-content p[id$="Trigger"]:hover {
            color: var(--accent-color);
        }
        .panel-left .card-content p[id$="Trigger"] i {
             margin-right: 8px;
        }

        /* 通用模态框样式 */
        .modal {
            display: none;
            position: fixed;
            z-index: 1000;
            left: 0;
            top: 0;
            width: 100%;
            height: 100%;
            overflow: auto;
            background-color: rgba(0, 0, 0, 0.6);
            backdrop-filter: blur(5px);
            animation: fadeInModalBackground 0.3s ease-out;
        }
        @keyframes fadeInModalBackground {
            from { background-color: rgba(0,0,0,0); backdrop-filter: blur(0px); }
            to { background-color: rgba(0,0,0,0.6); backdrop-filter: blur(5px); }
        }
        .modal-content {
            background-color: var(--card-bg);
            margin: 10% auto;
            padding: 25px 30px;
            border: 1px solid rgba(var(--secondary-color-rgb, 0, 204, 255), 0.3);
            border-radius: 15px;
            width: 80%;
            max-width: 600px; /* 默认最大宽度 */
            box-shadow: 0 5px 25px rgba(0, 0, 0, 0.4);
            position: relative;
            animation: slideInModalContent 0.4s ease-out;
        }
        .modal-content.large-modal-content { /* 用于更大的模态框 */
            max-width: 800px;
            margin: 5% auto;
        }
        @keyframes slideInModalContent {
            from { transform: translateY(-50px); opacity: 0; }
            to { transform: translateY(0); opacity: 1; }
        }
        .modal-close-btn {
            color: var(--text-color);
            float: right;
            font-size: 28px;
            font-weight: bold;
            line-height: 1;
            transition: color 0.3s ease;
        }
        .modal-close-btn:hover,
        .modal-close-btn:focus {
            color: var(--danger-color);
            text-decoration: none;
            cursor: pointer;
        }
        .modal-content h2 {
            color: var(--accent-color);
            margin-top: 0;
            margin-bottom: 20px;
            font-size: 22px;
            border-bottom: 1px solid rgba(var(--secondary-color-rgb, 0, 204, 255), 0.2);
            padding-bottom: 10px;
        }
        .modal-content h2 i {
            margin-right: 10px;
        }

        /* 用户管理模态框列表样式 */
        #userListContainer {
            max-height: 400px;
            overflow-y: auto;
            padding-right: 10px;
        }
        .user-list-item {
            background-color: rgba(var(--primary-color-rgb, 241, 67, 8), 0.05);
            padding: 10px 15px;
            border-radius: 8px;
            margin-bottom: 10px;
            border-left: 3px solid var(--primary-color);
            font-size: 15px;
            display: flex;
            justify-content: space-between;
            align-items: center;
        }
        .user-list-item:last-child { margin-bottom: 0; }
        .user-list-item .user-identifier { color: var(--text-color); }
        .user-list-item .user-role {
            font-size: 13px;
            color: var(--accent-color);
            font-weight: bold;
            background-color: rgba(var(--accent-color-rgb, 0, 255, 204), 0.15);
            padding: 3px 8px;
            border-radius: 5px;
        }
        #userManagementError { margin-bottom: 15px; }

        /* 风险参数模态框特定样式 */
        .param-input-options {
            margin-bottom: 20px;
            display: flex;
            gap: 10px;
        }
        .param-input-options .tab-btn {
            flex-grow: 1;
            background: rgba(var(--primary-color-rgb, 241, 67, 8), 0.4);
            border: 1px solid var(--primary-color);
            color: var(--text-color);
        }
        .param-input-options .tab-btn.active-tab {
            background: linear-gradient(135deg, var(--primary-color), var(--secondary-color));
            color: white;
            box-shadow: 0 0 10px rgba(var(--secondary-color-rgb,0,204,255),0.5);
        }
        .param-input-options .tab-btn i {
            margin-right: 5px;
        }
        .param-input-section {
            padding: 15px;
            border: 1px dashed rgba(var(--secondary-color-rgb,0,204,255),0.3);
            border-radius: 8px;
            margin-top: 10px;
            background-color: rgba(var(--dark-bg-rgb, 10, 25, 41), 0.3);
        }
        #riskParamsForm .form-section {
            margin-bottom: 25px;
            padding-bottom: 15px;
            border-bottom: 1px solid rgba(var(--primary-color-rgb, 241, 67, 8), 0.2);
        }
        #riskParamsForm .form-section:last-of-type {
            border-bottom: none;
            margin-bottom: 10px;
        }
        #riskParamsForm .form-section h3 {
            color: var(--accent-color);
            font-size: 18px;
            margin-bottom: 15px;
        }
        #riskParamsForm .form-section h3 i {
            margin-right: 8px;
        }
        #riskParamsForm .two-column-form {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
            gap: 15px;
        }
        #excelUploadSection p {
            margin-bottom: 15px;
            line-height: 1.6;
        }
        #excelUploadSection input[type="file"] {
            padding: 10px;
            background-color: rgba(0,0,0,0.2);
            border: 1px dashed var(--secondary-color);
        }
        #paramResultsSection h4 {
            color: var(--accent-color);
            font-size: 16px;
            margin-bottom: 10px;
        }
        #paramResultsSection p {
            font-size: 15px;
            margin-bottom: 8px;
            color: var(--text-color);
        }
        #paramResultsSection p strong {
            color: var(--secondary-color);
            font-size: 16px;
        }
    </style>
</head>
<body>
    <!-- 认证区域 -->
    <div class="auth-container" id="authContainer">
        <!-- 登录表单 -->
        <div class="auth-form" id="loginSection">
            <h2>系统登录</h2>
            <form id="loginForm">
                <div class="error-message-auth" id="loginError"></div>
                <div class="form-group">
                    <label for="loginIdentifier"><i class="fas fa-envelope"></i> 邮箱 / <i class="fas fa-phone"></i> 手机号</label>
                    <input type="text" id="loginIdentifier" required>
                </div>
                <div class="form-group">
                    <label for="loginPassword"><i class="fas fa-lock"></i> 密码</label>
                    <input type="password" id="loginPassword" required>
                </div>
                <button type="submit" class="btn"><i class="fas fa-sign-in-alt"></i> 登 录</button>
            </form>
            <a href="#" class="auth-switch-link" id="showRegister">还没有账户？立即注册</a>
        </div>

        <!-- 注册表单 (初始隐藏) -->
        <div class="auth-form" id="registerSection" style="display: none;">
            <h2>创建账户</h2>
            <form id="registerForm">
                <div class="error-message-auth" id="registerError"></div>
                <div class="form-group">
                    <label for="registerPhone"><i class="fas fa-phone"></i> 手机号</label>
                    <input type="tel" id="registerPhone" required pattern="^\d{11}$" title="请输入11位手机号码">
                </div>
                <div class="form-group">
                    <label for="registerEmail"><i class="fas fa-envelope"></i> 邮箱</label>
                    <input type="email" id="registerEmail" required>
                </div>
                <div class="form-group">
                    <label for="registerPassword"><i class="fas fa-lock"></i> 设置密码</label>
                    <input type="password" id="registerPassword" required minlength="6">
                </div>
                <div class="form-group">
                    <label for="registerConfirmPassword"><i class="fas fa-lock"></i> 确认密码</label>
                    <input type="password" id="registerConfirmPassword" required>
                </div>
                <button type="submit" class="btn"><i class="fas fa-user-plus"></i> 注 册</button>
            </form>
            <a href="#" class="auth-switch-link" id="showLogin">已有账户？立即登录</a>
        </div>
    </div>

    <!-- 主仪表盘容器 (初始隐藏) -->
    <div class="dashboard-container">
        <div class="dashboard">
            <!-- 左侧面板 -->
            <div class="panel panel-left">
                <div class="panel-content">
                    <div class="card">
                        <div class="panel-title">
                            <i class="fas fa-user-circle"></i> 系统信息
                        </div>
                        <div class="card-content">
                            <p>用户: <span id="currentUserDisplay">未登录</span></p>
                            <p>登录时间: <span id="loginTimeDisplay">N/A</span></p>
                            <p>系统状态: 正常运行</p>
                            <button id="logoutBtn" class="btn" style="margin-top: 15px; background: var(--danger-color); width:auto; padding: 8px 15px;">
                                <i class="fas fa-sign-out-alt"></i> 退出登录
                            </button>
                        </div>
                    </div>
                     <div class="card">
                        <div class="panel-title">
                            <i class="fas fa-server"></i> 系统统计
                        </div>
                        <div class="card-content">
                            <p>已评估企业: 3 家</p>
                            <p>高风险企业: 0 家</p>
                            <p>今日新增: 0 家</p>
                        </div>
                    </div>

                    <div class="card">
                        <div class="panel-title">
                            <i class="fas fa-cog"></i> 系统设置
                        </div>
                        <div class="card-content">
                            <p id="riskParamsConfigTrigger"><i class="fas fa-cog"></i> 风险参数配置</p>
                            <p id="dataAnalysisTrigger"><i class="fas fa-chart-bar"></i> 数据分析 </p>
                            <p id="userManagementTrigger"><i class="fas fa-user-cog"></i> 用户管理</p>
                        </div>
                    </div>

                    <div class="card">
                        <div class="panel-title">
                            <i class="fas fa-book"></i> 风险案例库
                        </div>
                        <div class="card-content">
                            <div class="case-card">
                                <div class="case-title">乐高：从濒临破产到全球最赚钱玩具公司</div>
                                <div class="case-description">乐高集团在20世纪90年代因电子玩具冲击濒临破产，通过战略调整和创新管理，最终实现逆袭。</div>
                                <a href="https://www.thepaper.cn/newsDetail_forward_24460122" class="case-link" target="_blank">查看详情</a>
                            </div>
                            <div class="case-card">
                                <div class="case-title">恒大集团：2.4万亿债务危机</div>
                                <div class="case-description">恒大集团因过度杠杆和盲目多元化扩张，陷入严重债务危机，暴露出房地产行业高杠杆模式的风险。</div>
                                <a href="https://news.qq.com/rain/a/20230727A07P65" class="case-link" target="_blank">查看详情</a>
                            </div>
                             <div class="case-card">
                                <div class="case-title">巴林银行：因交易员违规操作倒闭</div>
                                <div class="case-description">巴林银行因交易员尼克·李森违规操作日经指数期货，导致超过8亿英镑亏损，最终破产。</div>
                                <a href="https://www.financialnews.com.cn/2025-02/28/content_419633.html" class="case-link" target="_blank">查看详情</a>
                            </div>
                        </div>
                    </div>
                </div>
            </div>

            <!-- 中间面板 -->
            <div class="panel panel-center">
                 <div class="panel-content">
                    <div class="dashboard-header">
                        <div class="dashboard-title">中小型企业风险评估系统</div>
                        <div class="dashboard-subtitle">实时监控与分析平台</div>
                    </div>
                    <div class="world-map" id="map"></div>
                    <div class="card">
                        <div class="panel-title">
                            <i class="fas fa-filter"></i> 筛选条件
                        </div>
                        <div class="card-content">
                            <div class="form-group">
                                <label for="riskFilter"><i class="fas fa-exclamation-triangle"></i> 风险等级</label>
                                <select id="riskFilter">
                                    <option value="all">全部</option>
                                    <option value="high">高风险</option>
                                    <option value="medium">中风险</option>
                                    <option value="low">低风险</option>
                                </select>
                            </div>
                        </div>
                    </div>
                    <div class="search-container card">
                        <div class="card-header">
                            <i class="fas fa-search"></i> 搜索框
                        </div>
                        <div class="card-content">
                            <div class="form-group">
                                <label for="searchInput"><i class="fas fa-search"></i> 搜索框</label>
                                <input type="text" id="searchInput" placeholder="输入公司名称或城市">
                            </div>
                        </div>
                    </div>

                    <div class="card">
                        <div class="panel-title">
                            <i class="fas fa-chart-line"></i> 风险评估表单
                        </div>
                        <div class="card-content">
                            <div class="two-column-form">
                                <div class="form-group"><label>年收入（万元）</label><input type="number" id="revenue" placeholder="例如：500"></div>
                                <div class="form-group"><label>利润率（%）</label><input type="number" id="profitMargin" placeholder="例如：15"></div>
                                <div class="form-group"><label>负债率（%）</label><input type="number" id="debtRatio" placeholder="例如：40"></div>
                                <div class="form-group"><label>现金流状况</label><select id="cashFlow"><option value="positive">正</option><option value="negative">负</option></select></div>
                                <div class="form-group"><label>市场份额（%）</label><input type="number" id="marketShare" placeholder="例如：10"></div>
                                <div class="form-group"><label>竞争对手数量</label><input type="number" id="competitors" placeholder="例如：5"></div>
                                <div class="form-group"><label>客户流失率（%）</label><input type="number" id="customerChurn" placeholder="例如：8"></div>
                                <div class="form-group"><label>员工流动率（%）</label><input type="number" id="employeeTurnover" placeholder="例如：12"></div>
                                <div class="form-group"><label>管理层稳定性</label><select id="managementStability"><option value="high">高</option><option value="medium">中</option><option value="low">低</option></select></div>
                                <div class="form-group"><label>创新能力</label><select id="innovationAbility"><option value="high">高</option><option value="medium">中</option><option value="low">低</option></select></div>
                                <div class="form-group"><label>行业风险</label><select id="industryRisk"><option value="high">高</option><option value="medium">中</option><option value="low">低</option></select></div>
                                <div class="form-group"><label>政策支持</label><select id="policySupport"><option value="yes">有</option><option value="no">无</option></select></div>
                            </div>
                            <button id="analyzeBtn" class="btn" style="margin-top: 15px;"><i class="fas fa-calculator"></i> 评估风险</button>
                        </div>
                    </div>
                    <div class="card">
                        <div class="panel-title"><i class="fas fa-exclamation-triangle"></i> 风险分析</div>
                        <div class="card-content">
                            <div class="risk-score" id="riskScore">--</div>
                            <div class="risk-level" id="riskLevel">--</div>
                            <div class="chart-container" id="radarChart"></div>
                        </div>
                    </div>
                    <div class="card">
                        <div class="panel-title"><i class="fas fa-exclamation-triangle"></i> 风险结果</div>
                        <div class="card-content" id="riskFactors"></div>
                    </div>
                    <div class="card">
                        <div class="panel-title"><i class="fas fa-lightbulb"></i> 改进建议</div>
                        <div class="card-content" id="suggestions"></div>
                    </div>
                </div>
            </div>

            <!-- 右侧面板 -->
            <div class="panel panel-right">
                <div class="panel-content">
                    <div class="card">
                        <div class="panel-title"><i class="fas fa-chart-pie"></i> 风险分布</div>
                        <div class="card-content">
                            <div class="pie-chart">
                                <canvas id="riskDistributionChart"></canvas>
                            </div>
                        </div>
                    </div>
                    <div class="card">
                        <div class="panel-title"><i class="fas fa-table"></i> 最近评估</div>
                        <div class="card-content">
                            <table class="table">
                                <thead><tr><th>企业名称</th><th>风险等级</th><th>时间</th></tr></thead>
                                <tbody>
                                    <tr><td>临沂苌鑫建筑劳务有限公司</td><td><span style="color: var(--success-color);">低风险</span></td><td>17分钟前</td></tr>
                                    <tr><td>临沂建筑工程咨询有限责任公司</td><td><span style="color: var(--success-color);">低风险</span></td><td>39分钟前</td></tr>
                                    <tr><td>山东佰盈置业有限公司</td><td><span style="color: var(--warning-color);">中风险</span></td><td>1小时前</td></tr>
                                </tbody>
                            </table>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <!-- 用户管理模态框 -->
    <div id="userManagementModal" class="modal">
        <div class="modal-content">
            <span class="modal-close-btn" id="userManagementModalCloseBtn">×</span> <!-- Specific ID for close btn -->
            <h2><i class="fas fa-users-cog"></i> 用户列表</h2>
            <div class="error-message-auth" id="userManagementError"></div>
            <div id="userListContainer">
                <p>正在加载用户数据...</p>
            </div>
        </div>
    </div>

    <!-- 风险参数配置模态框 -->
    <div id="riskParamsModal" class="modal">
        <div class="modal-content large-modal-content">
            <span class="modal-close-btn" id="riskParamsModalCloseBtn">×</span>
            <h2><i class="fas fa-sliders-h"></i> 风险参数配置</h2>
            <div class="error-message-auth" id="riskParamsError"></div>

            <div class="param-input-options">
                <button id="showManualInputBtn" class="btn tab-btn active-tab"><i class="fas fa-keyboard"></i> 手动输入</button>
                <button id="showExcelUploadBtn" class="btn tab-btn"><i class="fas fa-file-excel"></i> 上传Excel </button>
            </div>

            <div id="manualInputSection" class="param-input-section">
                <form id="riskParamsForm">
                    <div class="form-section">
                        <h3><i class="fas fa-users"></i> 客户流失率参数</h3>
                        <div class="two-column-form">
                            <div class="form-group">
                                <label for="custInitialCount">期初客户总数</label>
                                <input type="number" id="custInitialCount" placeholder="例如: 1000">
                            </div>
                            <div class="form-group">
                                <label for="custEndCount">期末客户总数</label>
                                <input type="number" id="custEndCount" placeholder="例如: 950">
                            </div>
                            <div class="form-group">
                                <label for="custNewCount">期间新增客户数</label>
                                <input type="number" id="custNewCount" placeholder="例如: 50">
                            </div>
                            <div class="form-group">
                                <label for="custLostCount">期间流失客户数</label>
                                <input type="number" id="custLostCount" placeholder="例如: 100" required>
                            </div>
                        </div>
                        <div class="form-group">
                             <label for="custCategory">客户分类信息 (示例)</label>
                             <input type="text" id="custCategory" placeholder="例如: VIP, 普通, 潜在">
                        </div>
                        <div class="form-group">
                            <label for="custChurnReason">流失原因分类 (示例)</label>
                            <input type="text" id="custChurnReason" placeholder="例如: 自愿, 价格, 服务">
                        </div>
                         <div class="form-group">
                            <label for="custLifecycle">客户生命周期 (示例)</label>
                            <input type="text" id="custLifecycle" placeholder="例如: 新客户, 成长客户, 成熟客户">
                        </div>
                        <div class="form-group">
                            <label for="custValue">客户价值信息 (示例)</label>
                            <input type="text" id="custValue" placeholder="例如: 高价值, 中价值, 低价值">
                        </div>
                    </div>

                    <div class="form-section">
                        <h3><i class="fas fa-user-tie"></i> 员工流动率参数</h3>
                        <div class="two-column-form">
                            <div class="form-group">
                                <label for="empInitialCount">期初员工总数</label>
                                <input type="number" id="empInitialCount" placeholder="例如: 100">
                            </div>
                            <div class="form-group">
                                <label for="empEndCount">期末员工总数</label>
                                <input type="number" id="empEndCount" placeholder="例如: 90">
                            </div>
                            <div class="form-group">
                                <label for="empHiredCount">期间新聘员工数</label>
                                <input type="number" id="empHiredCount" placeholder="例如: 10">
                            </div>
                            <div class="form-group">
                                <label for="empLeftCount">期间离职员工数</label>
                                <input type="number" id="empLeftCount" placeholder="例如: 20" required>
                            </div>
                        </div>
                        <div class="form-group">
                             <label for="empCategory">员工分类信息 (示例)</label>
                             <input type="text" id="empCategory" placeholder="例如: 管理层, 技术岗, 销售岗">
                        </div>
                        <div class="form-group">
                            <label for="empLeaveType">离职类型 (示例)</label>
                            <input type="text" id="empLeaveType" placeholder="例如: 自愿, 裁员, 退休">
                        </div>
                         <div class="form-group">
                            <label for="empTenure">员工在职时间 (示例)</label>
                            <input type="text" id="empTenure" placeholder="例如: <1年, 1-3年, >3年">
                        </div>
                        <div class="form-group">
                            <label for="empKeyPosition">关键岗位标识 (示例)</label>
                            <input type="text" id="empKeyPosition" placeholder="例如: 是, 否">
                        </div>
                        <div class="form-group">
                            <label for="empLeaveReason">离职原因分类 (示例)</label>
                            <input type="text" id="empLeaveReason" placeholder="例如: 薪资, 发展, 家庭">
                        </div>
                    </div>
                    <button type="submit" class="btn"><i class="fas fa-calculator"></i> 计算比率</button>
                </form>
            </div>

            <div id="excelUploadSection" class="param-input-section" style="display: none;">
                <p>请选择包含所需数据的 Excel 文件进行上传。系统将尝试读取数据并计算比率。</p>
                <div class="form-group">
                    <label for="excelFile">选择文件 (.xlsx, .xls, .csv)</label>
                    <input type="file" id="excelFile" accept=".xlsx, .xls, .csv">
                </div>
                <button id="uploadExcelBtn" class="btn"><i class="fas fa-upload"></i> 上传并处理 </button>
                <p style="margin-top: 15px; font-size: 13px;">
                    <a href="#" id="downloadExcelTemplate" style="color: var(--accent-color); text-decoration: underline;">下载Excel模板示例</a>
                </p>
            </div>

            <div id="paramResultsSection" style="margin-top: 20px; padding-top:15px; border-top: 1px solid rgba(var(--secondary-color-rgb,0,204,255),0.2);">
                <h4>计算结果:</h4>
                <p>客户流失率: <strong id="customerChurnResult">--</strong> %</p>
                <p>员工流动率: <strong id="employeeTurnoverResult">--</strong> %</p>
            </div>
        </div>
    </div>

    <script src="{{ url_for('static', filename='js/script.js') }}"></script>
</body>
</html>